<template>
  <div class="hello">
    <div class="home">
      <div class="main" style="padding:24px;padding-top: 0px;">
        <div style="border: 1px solid #DCDFE6;width: 100%">
          <div class="tablehead">
            <div style="display: flex; line-height: 30px;margin-top: 5px;">
              <div style="height: 20px;width: 5px;background-color: #47ACF4;margin-right: 10px;margin-top: 5px;"></div>
              <span>任务进度报告</span>
            </div>
            <div style="margin-left: auto;">
              <div style="height: 40px;margin-top: 5px;">
                <el-button v-if="roleKey" type="primary" style="height: 30px; margin-right: 12px;line-height: 12px;"
                  @click="addPlanOpen">添加任务进度报告</el-button>
              </div>
            </div>
          </div>
          <div>
            <el-table :data="tableData" :cell-style="tableStyle" :header-cell-style="headerCellStyle"
              style="width: 100%">
              <el-table-column v-for="(column, index) of columns" :key="index" :prop="column.prop" :label="column.label"
                :fixed="column.fixed" :width="column.width">
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="120">
                <template slot-scope="scope" v-if="roleKey">
                  <el-button @click="editProgressRow(scope.row)" type="text" size="small">编辑</el-button>
                  <el-button @click="deleteRow(scope.row)" type="text" size="small">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div style="border: 1px solid #DCDFE6;margin-top: 20px;width: 100%">
          <div class="tablehead">
            <div style="display: flex; line-height: 30px;margin-top: 5px;">
              <div style="height: 20px;width: 5px;background-color: #47ACF4;margin-right: 10px;margin-top: 5px;"></div>
              <span>任务延期申请记录</span>
            </div>
            <div style="margin-left: auto;">
              <div style="height: 40px;margin-top: 5px;">
                <el-button v-if="roleKey" type="primary" style="height: 30px; margin-right: 12px;line-height: 12px;"
                  @click="dialogTaskDelay = true">添加任务延期申请</el-button>
              </div>
            </div>
          </div>
          <div>
            <el-table :data="tableDataDelay" :cell-style="tableStyle" :header-cell-style="headerCellStyle"
              style="width: 100%">
              <el-table-column v-for="(column, index) of columnsDelay" :key="index" :prop="column.prop"
                :label="column.label" :fixed="column.fixed" :width="column.width">
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="120">
                <template slot-scope="scope">
                  <span v-if="scope.row.status == '待审批' && submitKey">
                    <el-button @click="submitRow(scope.row)" type="text" size="small">提交</el-button>
                    <el-button @click="editDelayRow(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button @click="deleteDelayRow(scope.row)" type="text" size="small">删除</el-button>
                  </span>
                  <span v-if="scope.row.status != '待审批' && tableDataDelay.length >= scope.row.index">
                    <el-button @click="doRow(scope.row)"
                      :disabled="'canDo' in tableDataDelay[scope.row.index - 1] ? tableDataDelay[scope.row.index - 1].canDo : false"
                      type="text" size="small">{{
                  canDoTitle
                }}</el-button>
                  </span>

                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="添加任务进度报告" :visible.sync="dialogTableVisible" width="50%">
      <el-form ref="form" :model="form" label-width="150px" :rules="processRules">
        <el-form-item label="任务总体完成率(%)" prop="overallCompletionRate">
          <el-input placeholder="请填写总体完成率" v-model="form.overallCompletionRate"></el-input>
        </el-form-item>
        <!-- <el-form-item label="任务进度描述" prop="progressDescription">
          <el-input type="textarea" placeholder="请填写任务进度描述" v-model="form.progressDescription"></el-input>
        </el-form-item> -->
        <!-- <el-form-item label="对应的生产计划" prop="taskProductionPlanId">
          <el-select ref="OptionRefPlanType" v-model="form.taskProductionPlanId" placeholder="请选择生产计划"
            style="width: 100%;">
            <el-option v-for=" item in PlanOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="前期进展" prop="progress">
          <el-input type="textarea" placeholder="请填写前期进展" v-model="form.progress"></el-input>
        </el-form-item>
        <el-form-item label="下期计划" prop="plannedWok">
          <el-input type="textarea" placeholder="请填写下期计划" v-model="form.plannedWok"></el-input>
        </el-form-item>
        <!-- <el-form-item label="下期(下月)工作计划投入在职人数(个)" prop="plannedWokerNumber">
          <el-input v-model="form.plannedWokerNumber" placeholder="请填写下期(下月)工作计划投入在职人数"></el-input>
        </el-form-item> -->
        <el-form-item label="问题和困难" prop="problem">
          <el-input type="textarea" placeholder="请填写问题和困难" v-model="form.problem"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" placeholder="请填写备注" v-model="form.remark"></el-input>
        </el-form-item>
        <div style="text-align: right;margin-bottom: 10px;">
          <el-button type="primary" style="height: 30px;" @click="addPlan">添加外协使用计划</el-button>
        </div>
        <el-table :data="tableData2" :cell-style="tableStyle" :header-cell-style="headerCellStyle" style="width: 100%">
          <el-table-column v-for="( column, index ) of  columnsData2.columns " :key="index" :prop="column.prop"
            :label="column.label" :fixed="column.fixed" :width="column.width">
            <template slot-scope="scope">
              <span v-if="scope.row.isSet">
                <el-input size="mini" placeholder="请输入内容" v-model="columnsData2[column.prop]">
                </el-input>
              </span>
              <span v-else>{{ scope.row[column.prop] }}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.isSet">
                <el-button @click="saveRow(scope.row)" type="text" size="small">保存</el-button>
                <el-button @click="cancelRow(scope.row)" type="text" size="small">取消</el-button>

              </span>
              <span v-else>
                <el-button @click="editRow(scope.row)" type="text" size="small">编辑</el-button>
                <el-button @click="deleteRowWX(scope.row, scope.$index)" type="text" size="small">删除</el-button>
              </span>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <div style="text-align: center;">
        <el-button type="primary" style="height: 30px;" @click="addProgress">确定</el-button>
        <el-button style="height: 30px;" @click="dialogTableVisible = false">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加任务延期申请" :visible.sync="dialogTaskDelay" @close="closed">
      <el-form ref="formInline" :model="formInline" label-width="110px" :rules="delayRules">
        <el-form-item label="计划完成时间" prop="planCompletionTime">
          <el-date-picker type="date" placeholder="选择日期" v-model="formInline.planCompletionTime" style="width: 100%;"
            format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="延期至" prop="delayTo">
          <el-date-picker type="date" placeholder="选择日期" v-model="formInline.delayTo" style="width: 100%;"
            format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="延期原因" prop="delayReason">
          <el-input type="textarea" placeholder="请填写延期原因" v-model="formInline.delayReason"></el-input>
        </el-form-item>
        <el-form-item label="推进计划" prop="advancePlan">
          <el-input type="textarea" placeholder="请填写推进计划" v-model="formInline.advancePlan"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" placeholder="请填写备注" v-model="formInline.remark"></el-input>
        </el-form-item>
        <el-form-item label="相关附件">
          <el-upload :auto-upload="false" action="javascript:void(0)" :on-remove="handleRemove" :file-list="fileList"
            :on-change="handleChange" :on-preview="downLoad">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div style="text-align: right;">
        <el-button type="primary" style="height: 30px;" @click="addNewDelay">确定</el-button>
        <el-button style="height: 30px;" @click="dialogTaskDelay = false">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="任务延期申请审批" :visible.sync="dialogTaskDelayCando" @close="closed">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="计划完成时间">
          <el-date-picker :disabled="true" type="date" placeholder="选择日期" v-model="formInline.planCompletionTime"
            style="width: 100%;" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="延期至">
          <el-date-picker :disabled="true" type="date" placeholder="选择日期" v-model="formInline.delayTo"
            style="width: 100%;" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="延期原因">
          <el-input type="textarea" :disabled="true" placeholder="请填写延期原因" v-model="formInline.delayReason"></el-input>
        </el-form-item>
        <el-form-item label="推进计划">
          <el-input type="textarea" :disabled="true" placeholder="请填写推进计划" v-model="formInline.advancePlan"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" :disabled="true" placeholder="请填写备注" v-model="formInline.remark"></el-input>
        </el-form-item>
        <el-form-item label="相关附件">
          <el-upload :auto-upload="false" action="javascript:void(0)" :on-remove="handleRemove" :file-list="fileList"
            :on-change="handleChange" :on-preview="downLoad">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <!-- 审批 -->
      <template>
        <el-form ref="form" :model="0" label-width="100px">
          <el-row style="margin-top: 30px;">
            <el-col :span="24">
              <el-form-item label="审批意见：" prop="opinions">
                <el-input type="textarea" v-model="opinionform.opinions" placeholder="请输入" :rows="4"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="" prop="status">
                <el-radio-group v-model="opinionform.status">
                  <el-radio :label="'1'">同意</el-radio>
                  <el-radio :label="'2'">不同意</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="审批人：" prop="userId">
                <el-select ref="userId" :disabled="true" filterable v-model="opinionform.userId" placeholder="请选择"
                  style="width: 100%;">
                  <el-option v-for="   item    in   userList   " :key="item.value" :label="item.name"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="审批时间" prop="time">
                <el-date-picker :disabled="true" value-format="yyyy-MM-dd HH:mm:ss" v-model="opinionform.time"
                  type="date" style="width: 100%;" placeholder="选择日期时间"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="">
            <el-button type="primary" @click="delaySubmit">提交</el-button>
          </el-form-item>
        </el-form>
      </template>
    </el-dialog>
    <!-- 审批日志 -->
    <LogsBox :logsData="flowList"></LogsBox>
  </div>
</template>

<script>
import LogsBox from "@/components/LogsBox";

import Table from '@/components/NormalTable'
import {
  addNewProgress, getProgressList, deleteProgress, addDelay, getDelayList, editDelay,
  launchTask, editProgress, delayRequestProcessList, getAllUser, delayRequestProcess, deleteDelayRequest, getPlanList
} from '@/api/project/task'
export default {
  components: {
    Table,
    LogsBox
  },
  dicts: ['xmgl_process_status'],
  data() {
    return {
      submitKey: false,
      roleKey: false,
      PlanOptions: [],
      processStatusOption: [],
      dialogTaskDelayCando: false,
      canDo: false,
      fileList: [],
      userList: [],
      isEdit: false,
      isEditDelay: false,
      isEditProgress: false,
      dialogTableVisible: false,
      dialogTaskDelay: false,
      opinionform: {},
      headerCellStyle: {
        "background-color": '#F5F7FA',
        'text-align': 'center',
        'font-family': 'PingFangSC-Medium',
        'font-weight': 500,
        'font-size': '14px',
        'color': '#606266',
        'line-height': '22px'
      },
      tableStyle: {
        "text-align": 'center',
      },
      formInline: {
        user: '',
        region: ''
      },
      form: {
        responsibleDept: ''
      },
      flowList: [],
      columns: [
        { prop: 'index', label: '序号', width: '100', fixed: false },
        { prop: 'overallCompletionRate', label: '总体完成率', width: '', fixed: false },
        { prop: 'promoterName', label: '汇报人', width: '', fixed: false },
        { prop: 'writeTime', label: '汇报日期', width: '', fixed: false },
        { prop: 'progressDescription', label: '总体进展描述', width: '', fixed: false },
        { prop: 'progress', label: '本期工作进展', width: '', fixed: false },
        { prop: 'plannedWok', label: '下期工作计划', width: '', fixed: false },
      ],
      tableData: [{
        xh: '1',
        bh: '基础数据部',
        htdjh: '张艺',
        xmlx: '2023-11-22',
        xmmc: '审批中',
        lxdw: 'XXXX',

      }],
      tableData2: [
      ],
      columnsData2: {
        columns: [
          { prop: 'xh', label: '序号', width: '100', fixed: false },
          { prop: 'enterpriseName', label: '外协名称', width: '', fixed: false },
          { prop: 'wokerNumber', label: '计划使用外协人数', width: '', fixed: false },
        ],
        xh: null,
        enterpriseName: null,
        wokerNumber: null
      },
      columnsDelay: [
        { prop: 'index', label: '序号', width: '100', fixed: false },
        { prop: 'promoterDept', label: '申请部门', width: '', fixed: false },
        { prop: 'promoterName', label: '汇报人', width: '', fixed: false },
        { prop: 'requestTime', label: '申请日期', width: '', fixed: false },
        { prop: 'planCompletionTime', label: '原定完成时间', width: '', fixed: false },
        { prop: 'delayTo', label: '延期时间', width: '', fixed: false },
        { prop: 'status', label: '审批状态', width: '', fixed: false },
      ],
      tableDataDelay: [{
      }],
      headerList: [
        {
          name: '全部项目',
          icon: 'menu',
          count: '20',
          style: 'color:#47ACF4;font-size: 18px;',
          green: true
        },
        {
          name: '进行中',
          icon: 's-claim',
          count: '18',
          style: 'color:#F9CD43;font-size: 18px;',
          green: false
        },
        {
          name: '已完成',
          icon: 'document-checked',
          count: '3',
          style: 'color:#2ABF73;;font-size: 18px;font-weight: 600;',
          green: false
        },
        // {
        //     name: '已归档',
        //     icon: 'check',
        //     count: '2',
        //     style: 'color:rgba(255, 186, 0, 1);;font-size: 18px;font-weight: 600;',
        //     green: false
        // }
      ],
      userRole: [],
      wfActivityKey: '',
      canDoTitle: '已提交',
      processRules: {
        overallCompletionRate: [
          { required: true, message: '请输入任务总体完成率', trigger: 'blur' },
        ],
        progressDescription: [
          { required: true, message: '请输入任务进度描述', trigger: 'blur' },
        ],
        taskProductionPlanId: [
          { required: true, message: '选择对应生产计划', trigger: 'blur' },
        ],
        progress: [
          { required: true, message: '请输入本月工作量', trigger: 'blur' },
        ],
        plannedWok: [
          { required: true, message: '请输入下月工作计划', trigger: 'blur' },
        ],
        plannedWokerNumber: [
          { required: true, message: '请输入投入在职人数', trigger: 'blur' },
        ],
        problem: [
          { required: true, message: '请输入问题和困难', trigger: 'blur' },
        ]
      },
      delayRules: {
        planCompletionTime: [
          { required: true, message: '请输入计划完成时间', trigger: 'blur' },
        ],
        delayTo: [
          { required: true, message: '请输入延期至', trigger: 'blur' },
        ],
        delayReason: [
          { required: true, message: '请输入延期原因', trigger: 'blur' },
        ],
        advancePlan: [
          { required: true, message: '请输入推进计划', trigger: 'blur' },
        ]
      }
    }
  },
  mounted() {
    this.processStatusOption = this.getDict('xmgl_process_status')
    this.planList()
    this.userRole = this.$store.state.userInfo.userRoleKeyList
    this.getAllUserListInfo()
    this.loadTable();
    this.loadDelayTable();
    this.loadRoleKey()
  },
  methods: {
    loadRoleKey() {
      console.log(this.userRole)
      this.userRole.forEach(item => {
        if (item == 'scbm_rwfzr' || item == 'admin') {
          this.submitKey = true
          this.roleKey = true
        }
      });
    },
    loadTable() {
      getProgressList(this.$route.query.taskId).then(res => {
        this.tableData = res.rows
        this.tableData.forEach((row, index) => {
          row.index = index + 1
          this.userList.forEach(item => {
            if (item.label == row.promoter) {
              row.promoterName = item.name
            }
          });
        });
      })
    },
    loadDelayTable() {
      getDelayList(this.$route.query.taskId).then(res => {
        this.tableDataDelay = res.rows
        console.log('tableDataDelay', this.tableDataDelay)
        this.tableDataDelay.forEach((row, index) => {
          row.canDo = false
          row.index = index + 1
          row.statusOrigin = row.status
          row.status = this.convertDictValueToLabel(row.status, 'xmgl_status')
          this.getProductionPlanProcessList(row)
          this.userList.forEach(item => {
            if (item.label == row.promoter) {
              row.promoterName = item.name
            }
          });
        });
        console.log('delay', res)
      })
    },
    planList() {
      this.PlanOptions = [];
      getPlanList(this.$route.query.taskId).then(res => {
        res.rows.forEach(item => {
          let option = {}
          option.value = item.id
          option.label = this.convertDictValueToLabel(item.type, 'xmgl_task_plantype') + '(' + item.startTime + '~' + item.endTime + ')'
          this.PlanOptions.push(option)
        });
      })
    },
    closed() {
      this.loadDelayTable()
    },
    submitRow(row) {
      launchTask(this.$route.query.taskId, 'delay_request', this.tableDataDelay[row.index - 1].id).then(res => {
        if (res.code == 200) {
          alert("提交完成")
          this.loadDelayTable();
        }
      })
    },
    view(row) {
      this.$router.push('/projectDetails');
    },
    deleteRowWX(row, index) {
      this.tableData2.splice(index, 1);
      // console.log(row, index)
    },
    async editDelayRow(row) {
      this.isEditDelay = true
      this.formInline = row;
      this.formInline.status = row.statusOrigin
      this.dialogTaskDelay = true
    },
    //修改外协
    editRow(row) {
      this.isEdit = true;
      row.isSet = true
      this.columnsData2.xh = row.xh;
      this.columnsData2.enterpriseName = row.enterpriseName;
      this.columnsData2.wokerNumber = row.wokerNumber;
    },
    editProgressRow(row) {
      this.planList();
      this.form.taskProductionPlanId = this.tableData[row.index - 1].taskProductionPlanId
      this.form = row
      // console.log('taskProductionPlanId', this.tableData)
      console.log(this.form)
      this.dialogTableVisible = true;
      this.isEditProgress = true;
    },
    deleteRow(row) {
      let id = this.tableData[row.index - 1].id
      deleteProgress(this.$route.query.taskId, id).then(res => {
        if (res.code == 200) {
          alert("删除成功！")
          this.loadTable();
        }
      })
    },
    deleteDelayRow(row) {
      deleteDelayRequest(this.$route.query.taskId, row.id).then(res => {
        if (res.code == 200) {
          alert("删除成功！")
          this.loadDelayTable()
        }
      })
    },
    cancelRow(row) {
      if (this.isEdit) {
        row.isSet = false
      } else {
        this.tableData2.pop();
      }

    },
    saveRow() {
      this.tableData2.pop();
      let row = {
        xh: this.columnsData2.xh,
        enterpriseName: this.columnsData2.enterpriseName,
        wokerNumber: this.columnsData2.wokerNumber,
        isSet: false
      }
      this.tableData2.push(row);
      this.columnsData2.xh = null;
      this.columnsData2.enterpriseName = null;
      this.columnsData2.wokerNumber = null;
    },
    addPlan() {
      this.isEdit = false;
      let row = {
        xh: '',
        enterpriseName: '',
        wokerNumber: '',
        isSet: true
      }
      this.tableData2.push(row)
    },
    addPlanOpen() {
      this.planList();
      this.dialogTableVisible = true;
    },
    addProgress() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.isEditProgress) {
            this.form.taskId = this.$route.query.taskId
            this.form.taskProgressEnterprises = this.tableData2
            editProgress(this.form.taskId, this.form).then(res => {
              if (res.code == 200) {
                alert("编辑成功！")
                this.dialogTableVisible = false
                this.form = {
                  responsibleDept: "",
                  overallCompletionRate: "",
                  progressDescription: "",
                  progress: "",
                  plannedWok: "",
                  plannedWokerNumber: "",
                  problem: "",
                  remark: "",
                  taskId: "",
                  taskProgressEnterprises: [
                  ]
                }
                this.isEditProgress = false
                this.loadTable();
              }
            })
          } else {
            this.form.taskId = this.$route.query.taskId
            this.form.taskProgressEnterprises = this.tableData2
            addNewProgress(this.form.taskId, this.form).then(res => {
              if (res.code == 200) {
                alert("新增成功！")
                this.dialogTableVisible = false
                this.form = {
                  responsibleDept: "",
                  overallCompletionRate: "",
                  progressDescription: "",
                  progress: "",
                  plannedWok: "",
                  plannedWokerNumber: "",
                  problem: "",
                  remark: "",
                  taskId: "",
                  taskProgressEnterprises: [
                  ]
                }
                this.loadTable();
              }
            })
          }
        } else {
          this.$modal.msgError('请填写完完整信息！');
        }
      })


    },
    async addNewDelay() {
      if (this.fileList[0] > 0 && this.fileList[0]?.status !== 'success') {
        let result = await this.fileUpload(this.fileList);
        this.fileList = [{
          size: result.size,
          status: result.status,
          name: result.originalFilenames[0],
          path: result.fileNames[0],
          id: result.attachmentIds[0]
        }]
      }
      this.$refs.formInline.validate((valid) => {
        if (valid) {
          if (this.isEditDelay) {
            editDelay(this.formInline.taskId, this.formInline).then(res => {
              this.isEditDelay = false
              alert("修改成功！")
              this.dialogTaskDelay = false
              this.loadDelayTable();
              this.formInline = {}
            })
          } else {
            this.formInline.annexIdValues = this.fileList.map(item => item.id);
            this.formInline.taskId = this.$route.query.taskId
            addDelay(this.formInline.taskId, this.formInline).then(res => {
              if (res.code == 200) {
                alert("添加成功！")
                this.dialogTaskDelay = false
                this.loadDelayTable();
                this.formInline = {}
              }
            })
          }
        } else {
          this.$modal.msgError('请填写完完整信息！');
        }
      })


    },
    newProject() {
      this.$router.push('/newProject');
    },
    //附件移除
    handleRemove(file, fileList) {
      this.fileList = fileList;
    },
    // 材料改变
    handleChange(file, fileList) {
      const res = this.beforeAvatarUpload(file, fileList);
      if (!res || fileList.length >= 2) {
        fileList.shift();
      }
      this.fileList = fileList;
    },
    // 上传前控制
    beforeAvatarUpload(file, fileList) {
      const isLt2M = file.size / 1024 / 1024 < 100;
      if (!isLt2M) {
        this.$message.error(`上传图片大小不能超过100MB!`);
      }
      return isLt2M;
    },
    // 下载附件
    downLoad(file) {
      this.commonDownLoad(file);
    },
    // 定义一个函数用于转换字典值为标签
    convertDictValueToLabel(dictValue, dictName) {
      const labelMap = {};
      let dict = this.$store.state.dictNew[dictName]
      dict.forEach(item => {
        labelMap[item.value] = item.label
      });
      let label = '';
      if (labelMap.hasOwnProperty(dictValue)) {
        label += labelMap[dictValue] + ' ';
      }
      // console.log('label', label.trim())
      return label.trim(); // 去除首尾空格
    },
    doRow(row) {
      this.setDefault()
      this.formInline = row;
      this.formInline.status = row.statusOrigin
      this.dialogTaskDelayCando = true
    },
    //审批提交
    delaySubmit() {
      if (this.opinionform.opinions) {
        delayRequestProcess(this.$route.query.taskId, 'delay_request', this.formInline.id, this.opinionform).then(res => {
          if (res.code == 200) {
            alert("审批完成！")
            this.dialogTaskDelayCando = false
            this.opinionform = {}
          }
        })
      } else {
        alert("请填写审批意见")
      }

    },
    // 设置默认值
    setDefault() {
      this.opinionform.userId = this.$store.state.user.id;
      this.opinionform.time = this.$dayjs().format("YYYY-MM-DD HH:mm:ss");
    },
    // 获取所有用户
    getAllUserListInfo() {
      getAllUser().then(res => {
        this.userList = res.data;
      })

    },
    //获取办理过程
    getProductionPlanProcessList(row) {
      let id = row.id
      let that = this;
      delayRequestProcessList(this.$route.query.taskId, 'delay_request', id).then(res => {
        res.data.sort(function (a, b) {
          // 将时间字符串转换为日期对象，以便进行比较
          var dateA = new Date(a.startTime);
          var dateB = new Date(b.startTime);
          return dateA - dateB;
        });
        console.log('delayflowlist', res.data)
        this.wfActivityKey = res.data[res.data.length - 1]?.wfActivityKey
        this.tableDataDelay[row.index - 1].canDo = true
        that.userRole.forEach(item => {
          if ((item == that.wfActivityKey && that.status != '1') || item == 'admin') {
            this.tableDataDelay[row.index - 1].canDo = false
            this.canDoTitle = '审批'
          } else {
            this.tableDataDelay[row.index - 1].canDo = true
            this.canDoTitle = '已提交'
          }
        });
        console.log('tableDataDelay', this.tableDataDelay)
        this.flowList = [];
        this.flowList = res.data.sort((a, b) => {
          if (a.doneTime === null) return 1;
          if (b.doneTime === null) return -1;
          return new Date(a.doneTime).getTime() - new Date(b.doneTime).getTime();
        });
      })
    },
    getDict(dictName) {
      let dict = this.$store.state.dictNew[dictName]
      return dict
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  display: flex;
  flex-direction: column;
  width: 100wh;
  /* height: 100vh; */
  padding: 0px;
  /* background-color: aqua; */
  font-weight: 500;

  .top {
    display: flex;
    flex-direction: row;
    text-align: center;
    align-items: center;
    width: 100wh;
    height: 12vh;
    padding: 0px;
    /* background-color: rgb(0, 255, 55); */

    .top-item {
      display: flex;
      flex-direction: column;
      padding-left: 30px;
      /* width: 120px; */

      .greenPoint {
        background-color: #2ABF73;
        height: 10px;
        width: 10px;
        margin-right: 5px;
        margin-top: 19px;
        border-radius: 5px;
        margin-left: 10px;
      }
    }
  }

  .bottomAll {
    background-color: #FFFFFF;
    width: 103%;
    margin-top: 10px;

    .bottomTitle {
      width: 100%;
      height: 46px;
      align-items: center;
      border-bottom: 2px solid #DCDFE6;
      margin-bottom: 30px;
      display: flex;
      align-items: center;

      .bottomText {
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 16px;
        color: #303133;
        line-height: 24px;
        margin-left: 20px;
      }
    }
  }

  .main {
    margin-top: 10px;
    background-color: #FFFFFF;

    .tablehead {
      display: flex;
      width: 100%;

    }
  }
}

.logs {
  width: 100%;
  border: 1px solid #666;
  color: #999;

  .logsTitle {
    width: 100%;
    height: 60px;
    line-height: 60px;
    padding-left: 20px;
    border-bottom: 2px solid #999;
  }

  .logsContent {
    padding-top: 30px;

    .opinions {
      width: 600px;
      height: 50px;
      line-height: 50px;
      background: #f2f2f2;
      border-radius: 4px;
      padding-left: 10px;
    }
  }
}

.line {
  width: 100%;
  height: 2px;
  background: #999;
  margin-bottom: 20px;
}

::v-deep .el-dialog__body {
  max-height: 800px;
  overflow: auto;
}
</style>
<style>
.el-dialog__header {
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* 阴影效果 */
}
</style>
